@import "function";
@import url(reset.css);
@import url(font.css);
@import url(typo.css);
@import "compass/css3/border-radius";



* {
padding: 0;
margin: 0;
}
html, body {
height: 100%;
}	
body{ background-color:#FFF;}
* html .container { height: 100%; }

.max-container{  }
.container{ width:900px; margin:0px auto; position:relative; padding:0px 10px; height: auto !important; min-height:100%;}
.clear{ clear:both; }
.no_border{ border:none !important;}
.no_border_right{ border-right:none !important;}
.no_margin_right{ margin-right:0px !important;}
.no_margin_left{ margin-left:0px !important;}
.no_padding_left{ padding-left:0px !important;}
.no_padding_right{ padding-right:0px !important;}
.no-bg{background:none !important;}
.float_right{ float:right !important;}
.float_left{ float:left !important;}
.bold{ font-weight:bold !important; }
.textInput{ display:block; }
.hide{ display:none !important; }
.updnWatermark{ font-size:12px; color:#292929; left:260px !important; }
/* USING FOR SITE WITHOUT SLIDE IMAGE*/
.no_slideImage{ /*padding-top:120px;*/ top:-18px; }
.odd{ background-color:#eeeeee !important;}
.even{}

.txtInput_toggle{}

.clear-fix:after {
        visibility: hidden;
        display: block;
        content: "";
        clear: both;
        height: 0;
        }
* html .clear-fix             { zoom: 1; } /* IE6 */
*:first-child+html .clear-fix { zoom: 1; } /* IE7 */


/***************** SETTING WIDTH FOR HEADER - CONTENT - FOOTER  ********************/
.header,
.content,
.footer{width:900px;margin:0px auto; }

/***************** HEADING SETTING ********************/
.heading{
	display:block;
	border-bottom:1px solid #b7b7b7;
	padding-bottom:7px;
	margin-bottom:10px;
	h2{ display:block; color:#ed2327; text-transform:uppercase; font-weight:bold; font-size:14px;}
}



/***************** HEADER ********************/

.header{
	display:block;
	position:relative;
	z-index:99;
	@include bg('imgHeader-background.jpg',50%,0);
	.logo{
		display:block;
		float:left;
		width:247px;
		height:145px;
		margin-top:70px;
		a{
			display:block;
			text-indent:-9999px;
			width:247px;
			height:145px;
			@include bg('imgLogo-2.png');
		}
	}
	#header-temp{ position:absolute; right:0px; top:48px;}
	.navigation{
		float:right;
		background:#ed2327;
		border:1px solid #c70000;
		@include border-radius(5px);
		margin-top:150px;
		padding:0px 5px;
		position:relative;
		& > ul{
			margin:0;
			padding:0;			
			& > li{
				float:left;
				height:36px;
				position:relative;			
				& > a{
					display:block;
					text-transform:uppercase;
					color:#FFF;
					font-weight:bold;
					font-size:14px;
					margin:0 15px;
					line-height:36px;
					&:hover{ color:#000;}
					
				}
				ul.submenu{
					position:absolute;
					z-index:9999;
					min-width:180px;
					left:0;
					top:25px;
					padding-bottom:5px;
					padding-top:8px;
					display:none;
					@include border-radius(5px);
					
					li{						
						line-height:36px;					
						display:block;			
						@include bg('imgBorder-1.png',bottom,center);			
						background-color:#ed2327;
						min-width:180px;
						margin:0;
						padding:0;
						overflow:hidden;						
						a{	
							
							padding:0 15px;
							line-height:36px;
							height:33px;
							margin-bottom:3px;
							display:block;
							color:#FFF;
							text-transform:uppercase;
							font-size:12px;							
							&:hover{ color:#000;}
						}
					}
					li.sub-1{ @include border-radius(6px 6px 0 0);}
					li.sub-2{ @include border-radius(0px 0px 6px 6px);}
				}
				&:hover ul.submenu{ display:block;}
				a#item-home{ margin-top:6px; text-indent:-9999px; @include bg('imgHome.png',-30px,-1px); width:26px; height:24px; &:hover{ background-position:-1px -1px;} }
				a#item-support{ margin-top:5px; text-indent:-9999px; width:83px; height:26px; @include bg('imgSupport.png',0,-26px); &:hover{ background-position:0 0;}}
			}
		}
	}
}
/***************** SLIDE SETTING********************/
.slider{
	display:block;
	overflow:hidden;
	.slide-wrapper{
		margin:0;
		padding:0;
		li{
			display:block;
			width:900px;
			height:272px;
			img{
				display:block;
				width:900px;
				height:272px;				
				@include border-radius(8px);
				
				;
			}
		}
	}
}
/***************** HOMEPAGE CONTENT setting ********************/
.content{ padding-bottom:30px;}
.hp-cnt-1{
	display:block; overflow:hidden;
	padding-top:15px;
	.cnt-1-left{ width:280px; float:left;
		a#hp-webshop{ 
			display:block;  
			text-indent:-9999px;
			@include bg('imgWebshop.png',0,-63px); 
			width:280px; height:63px; 
			&:hover{ background-position:0 0;}
		}
		img{ display:block; margin:10px 0 0 15px;}
	}
	.cnt-1-right{  width:590px; float:left;
		margin-left:30px;
		h1{ font-weight:bold; color:#ed2327; font-size:16px; text-transform:uppercase; margin-bottom:10px;}
		p{ font-size:13px; a{ &:hover{ text-decoration:underline;}}}
	}
}
.hp-cnt-2{
	display:block;
	margin:20px 0;
	.hp-col{ 
		float:left; width:280px;
		a{
			display:block;
			margin-bottom:10px;
			img{
				@include border-radius(6px);
				width:280px;
				height:130px;
				display:block;
			}
		}
		h3{
			color:#ed2327;
			font-weight:bold;
			font-size:14px;
			text-transform:uppercase;
		}
		p{
			font-size:12px;
			a{ display:inline; &:hover{ text-decoration:underline;}}
		}
		
	}
	#hp-col-1{ margin-right:30px;}
	#hp-col-2{ margin-right:30px;}
	#hp-col-3{}
}
.read-more{ color:#ed2327 !important;}
/***************** FOOTER setting ********************/
.footer{
	display:block;
	border-top:1px solid #d1d1d1;
	padding-top:10px;
	position:relative;
	margin-bottom:20px;
	margin-top:60px;
	p{ color:#999999; text-align:center; font-size:10px;}
	a{ color:#999999; &:hover{ text-decoration:underline;}}
	img#imgCafe{ position:absolute; width:180px; height:158px; right:-80px; bottom:-59px;} 
}

/***************** REVEAL LOGIN setting ********************/
#frmLogin{
	margin-left:0px;
	left:35%;
}
.formLogin-wrapper{
	display:block;
	h1{ font-weight:bold; text-transform:uppercase; font-size:14px; margin-bottom:15px;}
	p{ color:#828282;}
	input{ border:1px solid #b4b4b4; padding:0 5px; width:220px; height:30px; line-height:30px; @include font-1; margin-bottom:8px;}
	a{ display:block; color:#ed2327;  &:hover{ text-decoration:underline;}}
	a#forgotPass{}
	a#btnRegister{}
	a#btnLogin{ display:block; margin-top:5px; text-indent:-9999px; width:69px; height:26px; @include bg('imgLogin.png');}
	
	
}
/***************** Heading setting ********************/
/***************** Heading setting ********************/
/***************** Heading setting ********************/
/***************** Heading setting ********************/
/***************** Heading setting ********************/
@import "form";
